<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="http://www.baidu.com" target="_blank" title="链接的标题" aaa="bbbb" class="a1">mylink</a>
    <div class="box">
        <ul>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
        </ul>
    </div>

</body>

</html>

<script>
    //1.获取元素对象
    var link = document.querySelector('a');
    // console.log(link);

    //2.读写元素对象的属性(默认属性)
    //和前面学的对象访问一致，通过点操作符或者中括号进行读写。
    //读:如果属性不存在，输出undefined
    // console.log(link.href); //http://www.baidu.com/
    // console.log(link.target); //_blank
    // console.log(link['title']); //链接的标题
    // console.log(link.aaa); //不可以直接访问，因为此属性时自定义属性。 undefined
    // console.log(link.hehe); //不存在属性。 undefined
    // console.log(link.className); //a1

    // 写
    // link.title = '我是新修改的标题';

    // 3.读写元素对象里面的内容。
    var box = document.querySelector('.box');
    // innerHTML：读写元素节点里的内容（包括元素）,从节点起始位置到终止位置的全部内容,包括内部的元素-重要(渲染的核心)
    // console.log(box.innerHTML);
    // outerHTML：读写元素节点里的内容（包括元素）,除了包含innerHTML全部内容外, 还包含元素节点本身。
    // console.log(box.outerHTML);
    // innerText： 读写某个元素节点的文本内容
    // console.log(box.innerText);

    var str = '';
    str += '<table border=1>';
    for (var i = 0; i < 10; i++) {
        str += '<tr>';
        for (var j = 0; j < 10; j++) {
            str += '<td>1111</td>';
        }
        str += '</tr>';
    }
    str += '</table>';
    //点击文档，将box里面的列表变成表格。
    document.onclick = function() {
        box.innerHTML = str;
    }
</script>